<template>
  <div>
    <!-- Header区域 -->
    <head-nev msg="黑马优购" :backState="true"></head-nev>

    <!-- 收货地址区域 -->
    <van-row type="flex" justify="center" align="center" v-if="this.addressIdExist===false">
      <van-col>
        <van-button icon="plus" type="info" size="small" @click="redirectToAddress">选择收货地址</van-button>
      </van-col>
    </van-row>
    <van-row v-else>
      <van-cell is-link center @click="redirectToAddress">
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <section>
            <span class="custom-title">收货人：{{this.chosenAddress.name}}</span>
            <!-- <van-tag type="danger">标签</van-tag> -->
            <span>联系电话：{{this.chosenAddress.tel}}</span>
          </section>
          <section>收货地址：{{this.chosenAddress.address}}</section>
        </template>
      </van-cell>
    </van-row>
    <!-- 分割线怎么做啊 -->
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">商品清单</van-divider>
    <!-- 所选商品区域 -->
    <van-card
      :key="index"
      v-for="(item, index) in cartList"
      :price="item.goods_price"
      :desc="item.goods_name"
      :thumb="item.goods_small_logo"
      :num="item.goods_amount"
    />
    <!-- Footer区域 -->
    <van-button type="primary" block class="van-button-bottom">登陆后下单</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressIdExist: false,
      chosenAddress: {},
      cartList: []
    }
  },
  created() {
    this.isAddressIdExist()
    this.getCartList()
  },
  methods: {
    redirectToAddress() {
      //   console.log(this)
      this.$router.push('/address')
    },
    isAddressIdExist() {
      if (window.localStorage.getItem('chosenAddressId')) {
        this.addressIdExist = true
        let chosenAddressId = parseInt(
            window.localStorage.getItem('chosenAddressId')
          ),
          addressArr = JSON.parse(window.localStorage.getItem('arr'))
        let addressArrIndex = addressArr.findIndex(
          item => item.id === chosenAddressId
        )
        this.chosenAddress = addressArr[addressArrIndex]
      } else {
        this.addressIdExist = false
      }
    },
    getCartList() {
      this.cartList = JSON.parse(localStorage.getItem('goodsIncate')).filter(
        x => x.checked
      )
    }
  }
}
</script>

<style scoped>
.van-row {
  height: 80px;
}
.van-cell {
  height: 100%;
}
section {
  height: 50%;
}
section span:nth-child(2) {
  float: right;
}
.van-divider {
  margin-top: 0;
}
.van-card {
  margin-left: 0;
}
.van-button-bottom {
  position: fixed;
  bottom: 0;
}
.van-popup {
  height: 100%;
}
</style>